<template>
	<div class="gk-layout-container">
	
		<div class="gk-layout-header">
			<!--工具栏-->
			<div class="toolbar" style="float:left;">
				<el-form :inline="true" :model="filters"  :size="global.gSize">

					<el-form-item    >
						<el-input v-model.trim="filters.craneId"   style="width:100px"  placeholder="垛机号"/> 
					</el-form-item>
					<el-form-item>
						<el-input v-model.trim="filters.shelfId"  style="width:100px"  placeholder="货架号"/>
					</el-form-item>
					<el-form-item>
						<el-select v-model="filters.itemId" placeholder="输入物料" auto-complete="off" style="width: 100%;" clearable filterable >
							<el-option v-for="item in Items" :key="item.Id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<kt-button :label="$t('action.search')" perms="wh:pk:view" type="primary" @click="findPage(null)" />
						<kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" perms="wh:pk:edit" />
					</el-form-item>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;">
				<el-form :inline="true"  :size="global.gSize" >
					<el-form-item>
						<el-input  v-model="pkFormData.boxCode" @keyup.enter.native="pkBoxCodes" placeholder="托盘码" /> 
					</el-form-item>
					<el-form-item>
						<el-input ref="barCode"  v-model="pkFormData.barCode" @keyup.enter.native="pkBarCodes" placeholder="设备编码" /> 
					</el-form-item>
				</el-form>
			</div>
		</div>
	



     <div class="gk-layout-main">
      <my-table :data="pageResult.content"   :loading="loading"  >
          <el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
            <template slot-scope="scope">   {{scope.$index+1}}   </template>
          </el-table-column> 
          <el-table-column  header-align="center"  align="center"  width="300"  prop="itemId" label="物料名称"   key="itemId"  :formatter="itemFilter" >  </el-table-column>
          <el-table-column header-align="center"  align="center"   prop="craneId" label="垛机号"   :formatter= "format02null" >  </el-table-column>
		  <el-table-column header-align="center"  align="center"   prop="shelfId" label="货架号"      :formatter= "format02null">  </el-table-column>
          <el-table-column header-align="center"  align="center"   prop="status" label="状态"     key="status" :formatter= "selectionFormat" >  </el-table-column>
          <el-table-column  header-align="center"  align="center"  prop="createDate" label="创建时间"     key="createDate" :formatter= "dateFormatDay" ></el-table-column> > 
          <el-table-column  header-align="center"  align="center"  width='300'  :label="$t('action.operation')"  >
              <template slot-scope="scope">
                   <kt-button icon="fa fa-edit"  :label="$t('action.showDetail')"    perms="wh:pk:edit"    @click="handleShowDetail(scope.$index, scope.row)" />
				   <kt-button icon="fa fa-edit"  label="开始盘库"  perms="wh:pk:start" v-if="scope.row.status=='1'"   @click="handleOut(scope.$index, scope.row)" />
                   <kt-button icon="fa fa-edit"  label="查看记录"  perms="wh:pk:start" v-if="scope.row.status>1"   @click="handleShowAll(scope.$index, scope.row)" />
              </template>
          </el-table-column>
      </my-table>
  </div>
  <!--分页栏-->
  <div class="toolbar gk-layout-footer"  style="padding:10px;">
    
    <el-pagination layout="total, prev, pager, next, jumper"  @current-change="findPage"
                   :current-page="pageRequest.pageNum"
                   :page-size="pageRequest.pageSize"
                   :total="pageResult.totalSize"
                   style="float:right;">
    </el-pagination>
  </div>



		<!--新增编辑界面-->
		<el-dialog title="盘库信息" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
			<el-form :model="dataForm" label-width="80px" ref="dataForm" :size="global.gSize" label-position="right">
				<el-form-item label="垛机号" prop="craneId">
					<el-input v-model.trim="dataForm.craneId"  ></el-input>
				</el-form-item>
				<el-form-item label="货架号" prop="shelfId">
					<el-input v-model.trim="dataForm.shelfId"  ></el-input>
				</el-form-item>
				<el-form-item label="输入物料" prop="locked">
					<el-select v-model="dataForm.itemId"   auto-complete="off" style="width: 100%;" clearable filterable >
						<el-option v-for="item in Items" :key="item.Id" :label="item.name" :value="item.id"/>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editDialogVisible = false"  >{{$t('action.cancel')}}</el-button>
				<el-button  type="primary"  v-if="dataForm.status==1"   @click.native="submitForm">{{$t('action.submit')}}</el-button>
			</div>
		</el-dialog>
	
		   <core-stock-detail-list :coreStockDetailViewVisible="coreStockDetailViewVisible" 
			@coreStockDetailListHidden="coreStockDetailListHidden" :title="coreStockDetailViewTitle"
			:filters="this.coreStockDetailViewFilters" >
		   </core-stock-detail-list>
		   
	</div>
</template>

<script>
 
	import KtButton from "@/views/Core/KtButton"
	import { format } from "@/utils/datetime"
	import { formatDay } from "@/utils/datetime"
    import MyTable from "@/views/Core/MyTable"
  	import CoreStockDetailList from "./CoreStockDetailList"
 import {getItemName} from "@/utils/myUtil"
	import XLSX from "xlsx";
	export default {
		components: { 
			KtButton,
			MyTable,
			CoreStockDetailList
		},
		data() {
			return {
			
				filters: {
					label: ''
				},
				loading:false,
				Items: [],
				pkFormData:{},
				pageRequest: { pageNum: 1, pageSize: 20 },
				pageResult: {},
				operation:true,
				dicts: this.$store.state.dict.dicts,
				editDialogVisible: false, // 新增编辑界面是否显示
				editLoading: false,
				coreStockDetailViewVisible: false,
				coreStockDetailViewTitle:'',
				coreStockDetailViewFilters:{pkId:null},
				// 新增编辑界面数据
				dataForm: {
					id: null,
					craneId: null,
					shelfId: null,
					itemId: null
					
				}
			}
		},
		methods: {
			// 获取分页数据
			findPage: function (data) {
				data=data||1;
				this.filters.pageNum = data
				this.pageRequest.pageNum =data
				this.filters.pageSize = this.pageRequest.pageSize
				this.$api.pk.findPage(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},
			coreStockDetailListHidden:function(){

				this.coreStockDetailViewVisible=false
			},
			handleShowAll:function(params,r){
				this.coreStockDetailViewFilters.pkId=r.id;
				this.coreStockDetailViewTitle="盘库明细";
				this.coreStockDetailViewVisible=true;

			},
			pkBoxCodes:function(data){
				this.$refs['barCode'].focus();
			},
			pkBarCodes:function(data){
				let barCode = this.pkFormData.barCode;
				if(barCode.length>4){
					this.$api.pk.checkDetail(this.pkFormData).then((res) => {
							
								if (res.code == 200) {
									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
										this.pkFormData.barCode="";
										this.$refs['barCode'].focus()
								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}
									
					})
					
				}
			
				
			},
			handleAdd: function () {

				this. editDialogVisible = true
				this.operation = true
				this.dataForm = {status:1}
			},
			// 显示详情界面
			handleShowDetail: function (params,row) {
				this.editDialogVisible = true
				this.operation = true
				this.dataForm = Object.assign({}, row)
			
			},
			//出库生成任务
			handleOut: function (params,r) {
				this.$api.pk.enginePk(r).then((res) => {
					debugger
					if (res.code == 200) {
						this.$message({ message: res.data, type: 'success' })
						this.findPage(null)   //这里有bug
					} else {
						this.$message({ message: res.msg, type: 'error' })
					}
				})
			},
			format02null: function (row, column, cellValue, index) {
				if(cellValue==0){
					return "";

				}
				return cellValue;
			},
		
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			},
			// 时间格式化
			dateFormatDay: function (row, column, cellValue, index) {
			
				return formatDay(row[column.property])
			},
			
		 submitForm: function () {
				this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
					this.editLoading = true
					let params = Object.assign({}, this.dataForm)
					this.$api.pk.save(params).then((res) => {
						this.editLoading = false
						if (res.code == 200) {
							this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
							this.editDialogVisible = false
							this.$refs['dataForm'].resetFields()
						} else {
							this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
						}
						this.findPage(null)
					})
					})
				}
				})
			},


			itemFilter: function (row, column, cellValue, index) {
				 return getItemName(cellValue,this.Items)
			},
		
			selectionFormat: function (row, column, cellValue, index) {
				let key = ""
				let propt = column.property;
			    if (propt == "status"  ) {
					key = "pkStatus"
				}
				
				let val = row[column.property];
				let dict = this.$store.state.dict.dicts[key];
				if (dict == undefined) {
					return row[column.property]
				}
				for (let i = 0; i < dict.length; i++) {
					if (dict[i].value == val) {
						return dict[i].label;
					}
				}
				return row[column.property]
			}
		},
		mounted() { 
			this.$api.item.findAll().then((res) => {
					this.Items = res.data
			})
			this.findPage(null)
		}
	}
</script>

